<!-- 角色=> 企业  -- 征信报告 -->
<template>
  <div class="main">
    <PureTableBar class="list_hei" title="催收系统">
      <template #buttons>
        <el-button type="primary" @click="openNew()"> 新建催收策略 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination" max-height="600"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <template #operation="{ row }">
            <el-button type="primary" size="small" text @click="ShowReportDestail(row)"> 查看模型 </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>

  <ReDialog :width="800" :height="500" :models="CreditVisible" @Closes="CloseVisible()">
    <template #header>
      <h2 style="text-align: center;">新建催收策略</h2>
    </template>
    <template #main>
      <el-scrollbar height="420px">
        <el-form :model="formData" label-width="150px">
          <el-form-item label="策略名称：">
            <el-input placeholder="策略名称" v-model.trim="formData.modelName" style="width:40%" />
          </el-form-item>
          <el-form-item label="客户类型：">
            <el-radio-group v-model="formData.customerType" class="ml-4">
              <el-radio label="CompanyCustomers" size="large">公司客户</el-radio>
              <el-radio label="RetailCustomers" size="large">零售客户</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="formData.customerType == 'CompanyCustomers'">
            <!-- 企业重大负面舆情 -->
            <div v-for="(item, index) in companyList" style="margin-bottom:80px">
              <el-form-item label="催收难度：">
                <el-select v-model="item.evaluationGrade">
                  <el-option v-for="type in companyGradeList" :key="type.selectId" :label="type.selectId
                  " :value="type.selectId" />
                </el-select>
              </el-form-item>
              <el-form-item label="逾期金额（万元）：">
                <el-input type="number" v-model="item.minOverdueAmount" style="width: 215px" :min="1" :max="1000"
                  placeholder="请输入1-1000的数字"
                  @blur="if (item.minOverdueAmount > 1000) item.minOverdueAmount = 1000; if (item.minOverdueAmount < 1) item.minOverdueAmount = 1;"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;
                <el-input type="number" v-model="item.maxOverdueAmount" style="width: 200px" :min="1" :max="1000"
                  placeholder="请输入1-1000的数字"
                  @blur="if (item.maxOverdueAmount > 1000) item.maxOverdueAmount = 1000; if (item.maxOverdueAmount < 1) item.maxOverdueAmount = 1;"></el-input>
              </el-form-item>
              <el-form-item label="逾期时间：">
                <el-select v-model="item.collectionTime" multiple>
                  <el-option v-for="type in collectionTimeList.selectOptions" :key="type.selectId" :label="type.selectId
                  " :value="type.selectId" />
                </el-select>
              </el-form-item>
              <el-form-item label="催收类型：">
                <el-select v-model="item.collectionType" @change="updateTypeSelect(index, item.collectionType)">
                  <el-option v-for="type in collectionTypeList.selectOptions" :key="type.selectId" :label="type.selectId
                  " :value="type.selectId" />
                </el-select>
              </el-form-item>
              <el-form-item label="催收方式：">
                <el-select v-model="item.collectionMethod" multiple>
                  <el-option v-for="type in item.collectionByList" :key="type.selectId" :label="type.selectId
                  " :value="type.selectId" />
                </el-select>
              </el-form-item>
            </div>
            <div style="display: flex; margin-left: 65px;" class="cursor-pointer">
              <CirclePlusFilled class="iocn" @click="addLevel" />
              <span style="height: 60px; line-height: 60px; color: #409Eff;" @click="addLevel">添加催收策略</span>
            </div>
            <div style="display: flex; margin-left: 65px;" class="cursor-pointer">
              <RemoveFilled class="delete_icon" @click="deleteCompany()" />
              <span style="height: 60px; line-height: 60px; color: red" @click="deleteCompany()">删除催收策略</span>
            </div>
          </div>
          <!-- 个人征信逾期 -->
          <div v-if="formData.customerType == 'RetailCustomers'">
            <div v-for="(item, index) in retailList" style="margin-bottom:80px">
              <el-form-item label="催收难度：">
                <el-select v-model="item.evaluationGrade">
                  <el-option v-for="type in retailGradeList" :key="type.selectId" :label="type.selectId
                  " :value="type.selectId" />
                </el-select>
              </el-form-item>
              <el-form-item label="逾期金额（万元）：">
                <el-input type="number" v-model="item.minOverdueAmount" :min="1" :max="1000" style="width: 215px"
                  placeholder="请输入1-1000的数字"
                  @blur="if (item.minOverdueAmount > 1000) item.minOverdueAmount = 1000; if (item.minOverdueAmount < 1) item.minOverdueAmount = 1;"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;
                <el-input type="number" v-model="item.maxOverdueAmount" style="width: 215px" :min="1" :max="1000"
                  placeholder="请输入1-1000的数字"
                  @blur="if (item.maxOverdueAmount > 1000) item.maxOverdueAmount = 1000; if (item.maxOverdueAmount < 1) item.maxOverdueAmount = 1;"></el-input>
              </el-form-item>
              <el-form-item label="逾期时间：">
                <el-select v-model="item.collectionTime" multiple>
                  <el-option v-for="type in collectionTimeList.selectOptions" :key="type.selectId" :label="type.selectId
                  " :value="type.selectId" />
                </el-select>
              </el-form-item>
              <el-form-item label="催收类型：">
                <el-select v-model="item.collectionType" @change="updateTypeSelect1(index, item.collectionType)">
                  <el-option v-for="type in collectionTypeList.selectOptions" :key="type.selectId" :label="type.selectId
                  " :value="type.selectId" />
                </el-select>
              </el-form-item>
              <el-form-item label="催收方式：">
                <el-select v-model="item.collectionMethod" multiple>
                  <el-option v-for="type in item.collectionByList" :key="type.selectId" :label="type.selectId
                  " :value="type.selectId" muli />
                </el-select>
              </el-form-item>
            </div>
            <div style="display: flex; margin-left: 65px;" class="cursor-pointer">
              <CirclePlusFilled class="iocn" @click="addLevel1" />
              <span style="height: 60px; line-height: 60px; color: #409Eff;" @click="addLevel1">添加催收策略</span>
            </div>
            <div style="display: flex; margin-left: 65px;" class="cursor-pointer">
              <RemoveFilled class="delete_icon" @click="deleteRetail()" />
              <span style="height: 60px; line-height: 60px; color: red" @click="deleteRetail()">删除催收策略</span>
            </div>
          </div>
        </el-form>
      </el-scrollbar>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="SubmitVisible()" :loading="BtnLoading" type="primary">确定</el-button>
        <el-button @click="CloseVisible()"> 取消 </el-button>
      </span>
    </template>
  </ReDialog>

  <!-- 详情窗口 -->
  <ReDialog :width="800" :height="500" :models="detailVisible" @Closes="CloseDetail()">
    <template #header>
      <h2 style="text-align: center;">催收策略详情</h2>
    </template>
    <template #main>
      <el-scrollbar height="420px">
        <el-form label-width="150px">
          <el-form-item label="策略名称：">
            {{ showTitle }}
          </el-form-item>
          <el-form-item label="客户群类型：">
            {{ showType == 'CompanyCustomers' ? '公司客户' : '零售客户' }}
          </el-form-item>
          <!-- 企业重大负面舆情 -->
          <div v-for="(item, index) in showData" style="margin-top:80px">
            <el-form-item label="催收难度：">
              {{ item.collectionDifficulty }}
            </el-form-item>
            <el-form-item label="逾期金额（万元）：">
              {{ item.minOverdueAmount }}
              &nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;
              {{ item.maxOverdueAmount }}
            </el-form-item>
            <el-form-item label="逾期时间：">
              {{ item.collectionTime }}
            </el-form-item>
            <el-form-item label="催收类型：">
              {{ item.collectionType }}
            </el-form-item>
            <el-form-item label="催收方式：">
              {{ item.collectionMethod }}
            </el-form-item>
          </div>
          <!-- 个人征信逾期 -->
        </el-form>
      </el-scrollbar>
    </template>
  </ReDialog>
</template>
<script setup lang="ts">
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import {
  CirclePlusFilled,
  RemoveFilled
} from "@element-plus/icons-vue";
import { useRiskStrategic } from "./hook/buildCollection";
import { ref, reactive, nextTick, watch } from "vue";
const {
  dataList,
  loading,
  CreditVisible,
  pagination,
  columns,
  formData,
  handleCurrentChange,
  handleSizeChange,
  ApplyCreditScore,
  SubmitVisible,
  CloseVisible,
  ShowReportDestail,
  companyGradeList,  //公司客户等级
  retailGradeList,  //零售客户等级
  collectionTimeList, //催收时间
  collectionTypeList, //催收类型
  collectionByList, //催收方式
  //根据类型联动
  precollectionList,
  territorialCollectionList,
  outsourcedCollectionList,
  retailList,
  companyList,
  updateLevelSelect,
  updateTypeSelect,
  addLevel,
  updateTypeSelect1,
  addLevel1,
  CloseDetail,
  detailVisible,
  BtnLoading,
  showData,
  showTitle,
  showType,
  deleteCompany,
  deleteRetail,
  openNew
} = useRiskStrategic()
</script>

<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);

.iocn {
  width: 60px;
  font-size: 20px;
  display: inline-block;
  padding: 15px;
  color: #409Eff;
}

.selectLeft {
  width: 150px;
  margin-left: 155px;
  margin-right: 30px;
  height: 32px;
  line-height: 32px;
}

.selectLeft1 {
  width: 400px;
  margin-left: 155px;
  margin-right: 30px;
  height: 32px;
  line-height: 32px;
}

.dialog-footer {
  margin: 0 auto;
  display: block;
  text-align: center;
}

:deep(.el-form-item__label) {
  font-weight: 700
}

.div-wrapper {
  display: inline-block;
}

.div-wrapper .custom-div {
  text-align: start;
  margin-right: 10px;
  /* 可适当调整间距大小 */
  margin-bottom: 10px;
  /* 可适当调整间距大小 */
}

.delete_icon {
  width: 60px;
  font-size: 20px;
  display: inline-block;
  padding: 15px;
  color: red;
}
</style>
